<template>
    <div class="view">

        <nav-bar title="位置信息" @clickLeft="back" @clickRight="send" :fixed="false">
            <div class="back" slot="left">
                <i class="iconfont icon-fanhui"></i>
            </div>
            <div class="send" slot="right">
                发送
            </div>
        </nav-bar>
        <div class="map-wrap">
            <div class="map-view" id="mapView" ref="mapView"></div>
        </div>
        <div class="poi-nav">
            <div class="poi-tab " :class="{'poi-tab-active':poiType === 0}" @click="filterPOI(0)">全部</div>
            <div class="poi-tab" :class="{'poi-tab-active':poiType === 1}" @click="filterPOI(1)">写字楼</div>
            <div class="poi-tab" :class="{'poi-tab-active':poiType === 2}" @click="filterPOI(2)">小区</div>
            <div class="poi-tab" :class="{'poi-tab-active':poiType === 3}" @click="filterPOI(3)">商家</div>
        </div>
        <cube-scroll class="map-scroll" ref="scorll" :data="poiList">
            <div class="poi-item" :class="{'poi-item-selected':poi.selected}" @click="selectPOI(index)" v-for="(poi,index) in poiList" :key="index" v-if="poi.type ===0">
                <div class="poi-name ellipsis">{{poi.name}}</div>
                <div class="poi-position ellipsis">{{poi.position}}</div>
            </div>
            <div class="poi-item" :class="{'poi-item-selected':poi.selected}" @click=" selectPOI(index)" v-for="(poi,index) in poiList" :key="index" v-if="poi.type !==0 && (poiType === 0 || poi.type === poiType )">
                <div class="poi-name ellipsis">{{poi.name}}</div>
                <div class="poi-position ellipsis">{{poi.position}}</div>
            </div>
        </cube-scroll>
    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";
    import Http from "@/service/Http";
    import NavBar from "@/components/aui/NavBar.vue";
    import EmojiPicker from "@/components/aui/EmojiPicker.vue";
    import ChatBox from "@/components/aui/ChatBox.vue";


    import {Getter, Action, State, Mutation} from "vuex-class";
    import {InterfaceUser} from "@/interface/InterfaceUser";
    import {InterfacePosition} from "@/interface/InterfacePosition";
    import {updatePosition} from "@/store/dispatches";

    import CommonUnit from "@/unit/CommonUnit";

    @Component({
        components: {
            NavBar
        }
    })
    export default class LocationInformation extends Scene {

        private mapObj: any = {};

        private poiType: number = 0;
        private currentPosition: { lat: number, lng: number } = {lat: 0, lng: 0};

        private poiList: InterfacePosition[] = [{name: "当前位置", position: "未知", latitude: 24.490474, longitude: 118.11022, type: 0, selected: true, zoom: 11}];

        private back(): void {
            this.navigateBack();
        }

        private send(): void {
            for (let i in this.poiList) {
                if (this.poiList[i].selected) {
                    this.poiList[i].zoom = this.mapObj.getZoom();
                    updatePosition(this.poiList[i]);
                }
            }
            this.navigateBack();
        }

        private mounted() {
            setTimeout(() => {
                this.initMap();
            }, 500);
        }

        private get mapMarker(): {} {
            for (let i in this.poiList) {
                if (this.poiList[i].selected) {
                    return new AMap.Marker({
                        animation: "AMAP_ANIMATION_BOUNCE",
                        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                        position: new AMap.LngLat(this.poiList[i].longitude, this.poiList[i].latitude),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                        title: this.poiList[i].name
                    });
                }
            }
            return {};
        }

        private get userMarker(): {} {
            return new AMap.Marker({
                position: new AMap.LngLat(this.currentPosition.lng, this.currentPosition.lat),
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/loc.png",
            });
        }

        private initMap(): void {
            const map: any = new AMap.Map("mapView", {
                zoom: 11
            });

            let geolocation: any = "";
            map.plugin("AMap.Geolocation", function() {
                geolocation = new AMap.Geolocation({
                    noIpLocate: 0,
                    enableHighAccuracy: true,//是否使用高精度定位，默认:true
                    timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                    showButton: true,        //显示定位按钮，默认：true
                    buttonPosition: "RB",    //定位按钮停靠位置，默认：'LB'，左下角
                    buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                    extensions: "all",
                    showMarker: false,
                });
            });

            setTimeout(() => {
                map.addControl(geolocation);
                geolocation.getCurrentPosition();
            }, 300);
            AMap.event.addListener(geolocation, "complete", (evt: any) => {
                const mapZoom = map.getZoom();
                if (evt.type === "complete") {
                    this.currentPosition = {lat: evt.position.lat, lng: evt.position.lng};
                    this.poiList = [];
                    this.poiList.push({
                        name: "[当前位置]",
                        position: evt.formattedAddress,
                        latitude: evt.position.lat,
                        longitude: evt.position.lng,
                        selected: true,
                        type: 0,
                        zoom: mapZoom
                    });
                    const poiDataList = evt.pois;
                    for (let i in poiDataList) {
                        if (poiDataList[i].type.indexOf("写字楼") >= 0) {
                            this.poiList.push({
                                name: poiDataList[i].name,
                                position: poiDataList[i].address,
                                latitude: poiDataList[i].location.lat,
                                longitude: poiDataList[i].location.lng,
                                selected: false,
                                type: 1,
                                zoom: mapZoom
                            });
                        } else if (poiDataList[i].type.indexOf("住宅") >= 0 || poiDataList[i].type.indexOf("小区") >= 0) {
                            this.poiList.push({
                                name: poiDataList[i].name,
                                position: poiDataList[i].address,
                                latitude: poiDataList[i].location.lat,
                                longitude: poiDataList[i].location.lng,
                                selected: false,
                                type: 2,
                                zoom: mapZoom
                            });
                        } else {
                            this.poiList.push({
                                name: poiDataList[i].name,
                                position: poiDataList[i].address,
                                latitude: poiDataList[i].location.lat,
                                longitude: poiDataList[i].location.lng,
                                selected: false,
                                type: 3,
                                zoom: mapZoom
                            });
                        }
                    }
                    this.$nextTick(() => {
                        this.mapObj.clearMap();
                        (<any> this).$refs.scorll.refresh();
                        this.mapObj.add(this.userMarker);
                        this.mapObj.add(this.mapMarker);
                        this.mapObj.setFitView();
                    });
                }
            });

            AMap.event.addListener(geolocation, "error", (e: any) => {
                alert(e.message);
            });
            this.mapObj = map;
        }

        private filterPOI(n: number = 0) {
            this.poiType = n;
            this.$nextTick(() => {
                (<any> this).$refs.scorll.refresh();
            });
        }


        private selectPOI(n: number) {
            const poiList = [];
            this.mapObj.remove(this.mapMarker);
            // this.mapObj.clearMap();
            for (let i in this.poiList) {
                const poi = this.poiList[i];
                poi.selected = (Number(i) === n);
                poiList.push(poi);
            }
            this.poiList = poiList;
            this.$nextTick(() => {
                this.mapObj.clearMap();
                this.mapObj.add(this.userMarker);
                this.mapObj.add(this.mapMarker);
                this.mapObj.setFitView();
            });
        }
    }
</script>

<style scoped lang="stylus">
    .view
        background #fff;
        height 100vh;

        .map-wrap
            height 220px

            .map-view
                height 220px;
                width 100vw;

        .poi-nav
            height 40px;
            background #fff
            display flex;
            flex-direction row;
            justify-content center
            position relative;

            &::after
                content ''
                display block;
                height 1px;
                transform scaleY(.5);
                position absolute;
                left 0;
                right 0;
                bottom 0;
                background #bfbfbf;

            .poi-tab
                flex 1;
                text-align center;
                position relative;
                line-height 38px
                height 40px;

                &::after
                    content '';
                    display block;
                    position absolute;
                    width 1px;
                    top 8px;
                    bottom 8px;
                    background #bfbfbf;
                    left 0;

                &:nth-child(1)::after
                    display none;

            .poi-tab-active
                &::before
                    content '';
                    height 4px;
                    left 10px;
                    right 10px;
                    position absolute;
                    display block;
                    bottom 1px;
                    background $theme-common-color;

    .map-scroll
        height calc(100vh - 44px - 220px - 40px);

        .poi-item
            height 45px;
            position relative;
            padding-left 10px;

            &::after
                content '';
                position absolute;
                display block;
                height 1px;
                left 10px;
                right 0;
                bottom 0;
                background #d8d8d8

            .poi-name
                height 30px;
                line-height 30px;
                font-size 15px;

            .poi-position
                height 15px;
                line-height 15px;
                font-size 12px;
                color #808080;
                margin-top -3px;
                padding-right 20px;

        .poi-item-selected
            &::before
                content: "\e62e";
                display block;
                position absolute;
                height 18px
                width 18px;
                font-size 15px;
                line-height 18px;
                text-align center;
                color $theme-common-color;
                font-family "iconfont" !important;
                top 15px;
                right 10px;

            .poi-name, .poi-position
                color $theme-common-color;
</style>
